<template>
	<div>
		count: {{ count }}---doubleCount: {{ doubleCount }}
		<button @click="addCount">+1</button>
		<p>我是{{ user }}---{{ age }}岁了</p>
		<button @click="modifyUser">修改</button>
		<ul>
			<li v-for="(v, i) in list" :key="i">{{ v }}</li>
		</ul>
	</div>
</template>


<script>
import { defineComponent, ref, reactive, toRefs, computed, watch, onMounted, onUpdated, onUnmounted } from 'vue'

export default defineComponent({
	name: 'bannerView',
	// 组合api
	setup() {
		// 响应式数据
		const count = ref(1);
		const list = ref([])
		// 响应式数据	
		const data = reactive({
			user: '张三',
			age: '18'
		})
		// 声明计算属性
		const doubleCount = computed(() => {
			return count.value * 2
		})
		// 声明侦听属性
		watch(count, (newValue, oldValue) => {
			console.log('count 数据发生了改变')
			console.log(newValue, oldValue)
		}, {
			// 深度监听
			deep: true
		})
		// 声明方法
		const addCount = () => {
			// 通过ref声明的变量 必须访问.value
			count.value++
		}
		const modifyUser = () => {
			data.user = '张丽'
		}

		// 生命周期函数
		onMounted(() => {
			// 页面首次挂载完毕， 数据也准备就绪
			fetch('/api/list').then(res => res.json()).then(data => {
				console.log(data)
				list.value = data.data
			})
		})
		// 更新
		onUpdated(() => {
			console.log('存在数据更新');
		})
		// 销毁
		onUnmounted(() => {
			console.log('组件被销毁了')
		})

		// 必须返回
		// 返回的数据才可以使用（模板）
		return {
			count,
			...toRefs(data),
			addCount,
			modifyUser,
			doubleCount,
			list
		}
	}

})

</script>